import { PlayCircleOutlined } from '@ant-design/icons';
import { Button, Modal, Radio, Space, Table } from 'antd';
import { fromCircle } from 'ol/geom/Polygon';
import { useState, useEffect, useRef } from 'react'
import useMap from '../../hooks/useMap';
import LittleTitle from '../../../../../../common/LittleTitle';
import RadiusComponent from '../../../../../../common/RadiusComponent';
import DrawComponent from '../../common/DrawComponent';
import CztApi from '../../../../../../../utils/apis/CztApi';
import CztzhfxResult from './CztzhfxResult';
import { geomToWkt, navByWkt } from '../../../../../../../utils/helper/mapHelper';
import rangeDisplayIcon from '../../../../pages/Jcyj/rangeDisplayIcon';

export default function Cztzhfx(props) {
    const ref = useRef();
    const map = useMap();
    const [loading, setLoading] = useState();
    const [radius, setRadius] = useState();
    const [geom, setGeom] = useState()
    useEffect(() => {
        return () => {
            const allLayers = map.getLayers().getArray();
            [...allLayers].forEach(l => {
                if (l?.get("layerName") === 'rangeDisplayIcon') {
                    map.removeLayer(l);
                }
            })
        }
    }, [map])
    return <Space direction='vertical' style={{
        width: '100%'
    }}>
        <Space className='w100' direction='vertical'>
            <LittleTitle fontSize={16} icon={false}>选择周边距离</LittleTitle>
            <RadiusComponent radius={radius} onChange={value => {
                setRadius(value)
            }} />
        </Space>
        {radius && <Space className='w100' direction='vertical'>
            <LittleTitle fontSize={16} icon={false}>绘制图形</LittleTitle>
            <DrawComponent radius={radius * 1000} onDrawEnd={geom => {
                setGeom(geom)
            }} />
        </Space>}

        {geom && < div style={{
            marginTop: 16,
            textAlign: "right"
        }}>
            <Button icon={<PlayCircleOutlined />} loading={loading} type="primary" onClick={e => {
                const wkt = geomToWkt(geom);
                navByWkt(wkt, map, true);
                setLoading(true)
                CztApi.listByPolygon2(wkt).then((resp) => {
                    rangeDisplayIcon(resp.data?.map(d => {
                        return {
                            name: d.cztxl,
                            ...d
                        }
                    }), wkt, map, 'cztfx', geom)
                    map.dispatchEvent({
                        type: 'detail.show',
                        title: '分析结果',
                        component: <CztzhfxResult result={{
                            geom,
                            wkt,
                            data: resp.data
                        }} />
                    })
                }).finally(e => setLoading(false))
            }}>开始分析</Button>
        </div>
        }
    </Space >;
}